<template>
  <view class="container">
    <!-- 用户头像 -->
    <view class="avatar-container">
      <image class="avatar" :src="userInfo.psy_pic" mode="aspectFill"></image>
	  <!-- 咨询师身份标识 -->
	<view class="identity-box">
	  <text class="identity-text">咨询师</text>
	</view>
    </view>

    <!-- 用户信息区块 -->
    <view class="info-block">
      <view class="info-item">
        <text class="info-label">昵称</text>
        <text class="info-value">{{ userInfo.psy_name }}</text>
      </view>
	  <view class="divider"></view>
      <view class="info-item">
        <text class="info-label">ID</text>
        <text class="info-value">{{ userInfo.psy_id }}</text>
      </view>
	  <view class="divider"></view>
      <view class="info-item">
        <text class="info-label">手机号</text>
        <text class="info-value">{{ userInfo.psy_phone }}</text>
      </view>
	  <view class="divider"></view>
      <view class="info-item">
        <text class="info-label">性别</text>
        <!-- 使用picker组件作为下拉菜单 -->
        <picker mode="selector" :range="genderOptions" @change="onGenderChange">
          <view class="picker">
            <text class="info-value">{{ userInfo.psy_sex || '请选择性别' }}</text>
          </view>
        </picker>
      </view>
	  <view class="divider"></view>
      <view class="info-item" @click="navigateToPasswordPage">
        <text class="info-label">密码</text>
        <text class="info-value">==&zwnj;****==**&zwnj;</text>
      </view>
	  <view class="divider"></view>
	  <view class="info-item" @click="navigateToSelfIntroductionPage">
	          <text class="info-label">自我介绍</text>
	  </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        psy_pic: '',
        psy_name: '',
        psy_id: 1,
       psy_phone: '',
        psy_sex: '',
        // 密码相关属性通常不会直接存储在这里
      },
      genderOptions: ['男', '女'],
    };
  },
  methods: {
    // 使用uni.request从后端API获取用户信息
    async fetchUserInfo() {
      try {
        const res = await uni.request({
          url: `http://127.0.0.1:5001/api_1_0/psyConsultant/${this.userInfo.psy_id}`, 
          method: 'GET',
          // 根据需要传递参数，例如用户ID或认证信息
          // data: { userId: this.userId, token: this.token },
        });

        if (res.statusCode === 200) {
          // 请求成功，更新userInfo对象
          this.userInfo = res.data.data[0];
        } else {
          // 请求失败，显示错误信息
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (err) {
        // 请求过程中发生异常，显示错误信息
        uni.showToast({
          title: '请求用户信息时发生异常',
          icon: 'none',
          duration: 2000
        });
        console.error(err);
      }
    },
    // 性别选择器变化时更新性别
    onGenderChange(e) {
      const selectedGender = this.genderOptions[e.detail.value];
      this.userInfo.psy_sex = selectedGender;

      // 发送PUT请求更新用户性别信息
      uni.request({
        url: `http://127.0.0.1:5001/api_1_0/psyConsultant/${this.userInfo.psy_id}`,
        method: 'PUT',
        header: {
          'Content-Type': 'application/json', // 设置正确的Content-Type
        },
        data: JSON.stringify({
          psy_sex: this.userInfo.psy_sex,
        }),
        success: (res) => {
          if (res.data.code === '2000') {
            console.log('更新成功:', res);
            // 根据返回结果处理逻辑，例如提示用户更新成功
            uni.showToast({
              title: '性别更新成功',
              icon: 'success',
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: '性别更新失败',
              icon: 'none',
              duration: 2000,
            });
          }
        },
        fail: (err) => {
          console.error('更新失败:', err);
          // 根据错误情况处理逻辑，例如提示用户更新失败
          uni.showToast({
            title: '性别更新失败',
            icon: 'none',
            duration: 2000,
          });
        },
      });
    },
    // 跳转到密码页面
    navigateToPasswordPage() {
      uni.navigateTo({
        url: '/pages/psy/my/reset_passwd' 
      });
    },
	// 跳转到自我介绍页面
	navigateToSelfIntroductionPage() {
	      uni.navigateTo({
	        url: '/pages/psy/my/area' 
	      });
	}
  },
  onLoad() {
    // 页面加载时调用获取用户信息的方法
    this.fetchUserInfo();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}


.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.identity-box {
  margin-top: 10px;
  padding: 3px 8px; /* 调整内边距使框更小 */
  background-color: #f0f0f0;
  border: 1px solid #ddd; /* 使用实线边框 */
  border-radius: 4px;
  font-size: 0; /* 清除父元素的字体大小影响 */
}

.identity-text {
  font-size: 14px; /* 设置文本字体大小 */
  color: #333;
}

.info-block {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.divider {
  height: 1px;
  background-color: #eee;
  margin: 10px 0; /* 控制分隔线上下的间距 */
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
}

.info-label {
  font-size: 16px;
  color: #333;
}

.info-value {
  font-size: 16px;
  color: #666;
}

.picker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
